<template>
	<div class="cratcrder">
		<el-row justify="space-between">
			<el-col>
				<span>待确认订单详情</span>
			</el-col>
		</el-row>
		<div class="cart-bottom"></div>
		<el-table
		border
		ref="multipleTable"
		:data="new_cartlist"
		style="width: 100%"
		highlight-current-row
		>
			<el-table-column label="图片" >
			  <template #default="scope">
				<img :src="`${$Imgurl}/api/public/showImg/${scope.row.book.picture}`" >
			  </template>
			</el-table-column>
			<el-table-column  label="商品名称">
				<template #default="scope">
					{{scope.row.book.name}}
				  </template>
			</el-table-column>
			<el-table-column label="商品价钱">
				<template #default="scope">
					{{scope.row.book.price}}
				  </template>
			</el-table-column>
			<el-table-column  label="商品数量">
				<template #default="scope">
					 {{scope.row.cart.num}}
				  </template>
			</el-table-column>
			<el-table-column property="name" label="商品总价" >
				<template #default="scope">
					{{scope.row.cart.num*scope.row.book.price}}
				  </template>
			</el-table-column>
		</el-table>
		<div class="menoys">
			<label>总价钱：</label><span>{{this.TotalPrice}}</span>
		</div>
		<div class="receiving">
			<el-input v-model="address" placeholder="请输入收货地址">
			    <template #prepend>收货地址</template>
			</el-input>
			<el-input v-model="phone" placeholder="请输入收货电话">
			    <template #prepend>收货电话</template>
			</el-input>
			<div class="receiving-buttom">
				<template v-if="flag">
					<el-button type="warning" @click="Reselection()">重新选择</el-button>
					<el-button type="danger" @click="getorder()">确认下单</el-button>
				</template>
				<template v-else>
					<el-button type="success" >下单成功，单号：{{ordid}}</el-button>
					<el-button type="danger" @click="payment()">去付款</el-button>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
	import { ElMessage } from 'element-plus'
	export default{
		name:'CratOrder',
		data(){
			return{
				address:'',
				phone:'',
				new_cartlist:[],
				TotalPrice:0,//总价
				new_order:[],//订单数据
				flag:true,//判断当前是否下单成功
				ordid:0,//单号
			}
		},
		methods:{
			//重新选择
			Reselection(){
				localStorage.removeItem('cartlist')
				this.$router.push({path:'/cart'})
			},
			//下单
			getorder(){
				if(!this.address||!this.phone){
					ElMessage({message:"地址和电话不能为空",type: "error"})
					return false;
				}
				// 将数据添加到数据库中
				this.axios.post('/api/fore/cart/addCart2Order',this.new_order).then((res)=>{
					this.ordid = res.data.data.ordid;
					this.flag=false;
					if(res.data.code==200){
						ElMessage({message:"下单成功！",type: "success"})
						let obj = {
							addr:this.address,
							ordid:this.ordid,
							phone:this.phone
						}
						// 将订单编号存入localStorage，方便付款页面操作
						localStorage.setItem('ordid',this.ordid)
						this.axios.post('/api/fore/ord/addAddr',obj).then((res)=>{
							console.log(res);
						})
					}
				}).catch((error)=>{
					console.log(error);
				})
			},
			//付款
			payment(){
				this.$router.push({path:'/paymentcrat'})
			}
		},
		created() {
			if(!localStorage.getItem('cartlist')){
				this.$router.push({path:'/cart'})
				return false;
			}else{
				this.new_cartlist = JSON.parse(localStorage.getItem('cartlist'))
				for(let temp of this.new_cartlist){
					//计算总价
					this.TotalPrice+=temp.book.price*temp.cart.num;
					let obj = {
						bookid:temp.cart.bookid,
						price:temp.book.price,
						num:temp.cart.num
					}
					this.new_order.push(obj)
				}
			}
			
		}
	}
</script>

<style scoped>
	.el-input-group{
		margin: 10px 0;
	}
	.cart-bottom{
		margin: 5px 0;
		margin-bottom: 10px;
		border-bottom: 2px solid #7f7f7f;
	}
	.el-col{
		font-size: 18px;
		font-weight: bold;
		line-height: 60px;
	}
	.receiving{
		padding: 10px;
		box-shadow: 0 0 5px #606266;
		width: 98%;
		margin: 20px auto 0;
	}
	.receiving-buttom{
		margin: 10px 0;
	}
	:deep(.el-table__cell img){
		width: 60px;
		height: 40px;
	}
	.menoys{
		padding: 10px 0;
		border-top: 5px solid #bcc0c8;
		border-bottom: 1px solid #303133;
	}
	.menoys label{
		color: #66c3ff;
		font-size: 14px;
		padding: 3px 5px 3px 10px;
		background: rgba(236, 245, 255, 1.0);
	}
</style>
